<template>
  <div id="overview_container">
    <!-- 头部区域 -->
    <div class="overview_header">
      <div class="header_left">智能驾驶研发平台</div>
      <div class="header_right">
        <el-dropdown>
          <span class="user_icon">
            <img src="../../../../assets/images/user-icon.png">
          </span>
          <el-dropdown-menu @click.native='handleUserSetting("loginout")' style="fontSize:12px;padding: 10px 20px;cursor:pointer">
            退出登录
          </el-dropdown-menu>
        </el-dropdown>
        <alarm-icon></alarm-icon>
        <span class="data_screen" @click="showDataScreen">
          <span class="screen_icon">
            <img src="../../../../assets/images/screen-icon.png">
          </span>
          <span class="screen_content">数据大屏</span>
        </span>
      </div>
    </div>

    <!-- 卡片展示 -->
    <div class="card_show">
      <el-card class="card_box">
        <div slot="header" class="clearfix">
          <span>总数据量（PB）</span>
        </div>
        <div class="number">{{numFormat(cardData.total_size)}}</div>
      </el-card>
      <el-card class="card_box">
        <div slot="header" class="clearfix">
          <span>采集时长（时）</span>
        </div>
        <div class="number">{{numFormat(cardData.duration)}}</div>
      </el-card>
      <el-card class="card_box">
        <div slot="header" class="clearfix">
          <span>采集里程数（KM）</span>
        </div>
        <div class="number">{{numFormat(cardData.mileage)}}</div>
      </el-card>
      <el-card class="card_box">
        <div slot="header" class="clearfix">
          <span>采集车数（辆）</span>
        </div>
        <div class="number">{{numFormat(cardData.car_count)}}</div>
      </el-card>
      <el-card class="card_box">
        <div slot="header" class="clearfix">
          <span>当前在途（辆）</span>
        </div>
        <div class="number">{{numFormat(cardData.car_in_transit)}}</div>
      </el-card>
    </div>

    <!-- echars图表展示 -->
    <div class="echarts_area">
      <!-- 待脱敏数据和标注数据头部 -->
      <div class="echarts_header">
        <p class="anonymize_content">待脱敏数据</p>
        <span class="anonymize_total" v-if="dataVolumeTotal>0">{{numFormat(dataVolumeTotal)}}</span>
        <span class="total_unit">TB</span>
        <el-dropdown>
          <el-button>
            {{anonymizeDropDownItem}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="overviewpageDropdownStyle" :appendToBody="false">
            <el-dropdown-item @click.native="handleAnonymizeData('城市')">城市</el-dropdown-item>
            <el-dropdown-item @click.native="handleAnonymizeData('图商')">图商</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p class="annotate_content">标注数据</p>
        <el-dropdown>
          <el-button>
            {{annotateDropDownItem}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="overviewpageDropdownStyle" :appendToBody="false">
            <el-dropdown-item @click.native="handleAnnotationData('全部')">全部</el-dropdown-item>
            <el-dropdown-item @click.native="handleAnnotationData('本周')">本周</el-dropdown-item>
            <el-dropdown-item @click.native="handleAnnotationData('本月')">本月</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 待脱敏数据和标注数据图表 -->
      <div class="echarts_main">
        <!-- 待脱敏数据图表 -->
        <div class="anonymize_echarts">
          <div class="anonymize_header">
            <span class="city">{{anonymizeDataSwitch}}</span>
            <span class="data_volume">数据量（TB）</span>
            <span class="duration">时长（时）</span>
            <span class="mileage">里程（KM）</span>
          </div>
         <el-scrollbar style="height:300px;width:740px" :native="false" :noresize="false">
          <span class="anonymize_right"> 
            <ul :class="anonymizeAreaData.length == 1 ? 'signalDataStyle city_info' : 'city_info' ">
              <li v-for="(item,index) in anonymizeAreaData" :key="index" >{{item}}</li>
            </ul>
            <div class="anonymizeGraph">             
              <durationChat
               v-for="(item,key,index) in anonymizeData "
               :anonymizeData = "item" 
               :anonymizeArea = "anonymizeAreaData"
               :color = "anonymizeDataColor[index]"
               :key = key
              />
            </div> 
          </span>
         </el-scrollbar>
        </div>
        <!-- 标注数据卡片 -->
        <div class="annotate_left">
          <el-card class="card_up">
            <img src="../../../../assets/images/label-icon1.svg" class="label_icon1">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">自动标注（张）</span>
            </div>
            <div class="number">{{numFormat(labelCardData.automatic_tasks)}}</div>
            <div class="bottom">
              <span class="bottom_info">今日新增：</span>
              <span class="bottom_num">{{labelCardData.add_tasks}}</span>
            </div>
          </el-card>
          <el-card class="card_down">
            <img src="../../../../assets/images/label-icon2.svg" class="label_icon2">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">待自动标注（张）</span>
            </div>
            <div class="number">{{numFormat(labelCardData.pending_tasks)}}</div>
            <div class="bottom">
              <span class="bottom_info">预计时长：</span>
              <span class="bottom_num">{{labelCardData.expect_annotate_time + 'min'}}</span>
            </div>
          </el-card>
        </div>
        <!-- 标注数据图表 -->
        <div class="annotate_right">
          <div class="labelData_header">
            <div class="labelData_picture">
              <i class="picture_point"></i>
              <span class="picture_text">图片（张）</span>
            </div>
            <div class="labelData_cloud">
              <i class="cloud_point"></i>
              <span class="cloud_text">点云（张）</span>
            </div>
          </div>
          <labelDataChat ref='annotationChartComponent'/>
        </div>
      </div>
    </div>

    <!-- 场景数据 -->
    <div class="sceneData_echarts">
      <div class="sceneData_header">
        <p class="sceneData_content">场景数据</p>
        <el-dropdown>
          <el-button>
            {{sceneDropDownItem}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="overviewpageDropdownStyle" :appendToBody="false">
            <el-dropdown-item @click.native="handleSceneData('全部')">全部</el-dropdown-item>
            <el-dropdown-item @click.native="handleSceneData('本周')">本周</el-dropdown-item>
            <el-dropdown-item @click.native="handleSceneData('本月')">本月</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="sceneData_main">
        <!-- 饼图 -->
        <div class="pie_chart">
          <scenarioDataPie/>
          <div class="pie_bottom">
            <div class="pie_city">
              <i class="city_point"></i>
              <span class="city_text">城市</span>
            </div>
            <div class="pie_highSpeed">
              <i class="highSpeed_point"></i>
              <span class="highSpeed_text">高速</span>
            </div>
            <div class="pie_park">
              <i class="park_point"></i>
              <span class="park_text">停车场</span>
            </div>
          </div>
        </div>
        <!-- 条形图 -->
        <div class="bar_chart">
          <scenarioDataBar ref="sceneBarChartComponent"/>
        </div>
      </div>
    </div>

    <!-- 训练数据 -->
    <div class="trainingData_echarts">
      <div class="trainingData_header">
        <p class="trainingData_content">训练数据</p>
      </div>
      <div class="trainingData_main">
        <!-- 左侧卡片 -->
        <div class="trainingData_left">
          <el-card class="card_up">
            <img src="../../../../assets/images/train-icon1.svg" class="train-icon1">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">训练任务</span>
            </div>
            <div class="number">{{numFormat(trainCardData.train_tasks)}}</div>
            <div class="bottom">
              <span class="bottom_info">待训练任务：</span>
              <span class="bottom_num">{{trainCardData.pending_tasks}}</span>
            </div>
          </el-card>
          <el-card class="card_down">
            <img src="../../../../assets/images/train-icon2.svg" class="train-icon2">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">GPU消耗数</span>
            </div>
            <div class="number">{{numFormat(trainCardData.gpu_consumes)}}</div>
            <div class="bottom">
              <span class="bottom_info">平均训练时长：</span>
              <span class="bottom_num">{{trainCardData.average_train_duration}}</span>
            </div>
          </el-card>
        </div>
        <!-- 右侧图表 -->
        <div class="trainingData_right">
          <el-scrollbar style="width:1200px;height:342px;" :native="false" :noresize="false">
            <div class="trainCharts" :style="{width: trainData.length*440 + 20 +'px'}">
               <div class="feel" v-for="(item,index) in trainData" :key="index">
                <div class="feel_header">
                  <div class="feel_icon" :style="{backgroundColor:trainDataColor[index % 3]}">{{item.name}}</div>
                  <div class="feel_detail">
                    <span class="feel_content" v-if="item.trainType === 0">{{'感知融合'}}</span>
                    <span class="feel_content" v-if="item.trainType === 1">{{'前置中摄'}}</span>
                    <span class="feel_content" v-if="item.trainType === 2">{{'后置中摄'}}</span>
                    <span class="feel_version">{{item.trainVersion}}</span>
                  </div>
                  <div class="feel_progress">
                    <span class="progress_times">第{{item.trainTimes[item.dataLength-1]}}次训练进度</span>
                    <el-progress 
                      style="width: 160px;"
                      :color="trainDataColor[index % 3]"  
                      :percentage="item.trainProgress[item.dataLength-1]" 
                      class="progress_bar">
                    </el-progress>
                  </div>
                </div>
                <div class="feel_chart">
                  <feelChatPage :trainChartData="item" :dataColor="trainDataColor[index % 3]"/>
                </div>
               </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <!-- 仿真数据 -->
    <div class="emulationData_echarts">
      <div class="emulationData_header">
        <p class="emulationData_content">仿真数据</p>
        <el-dropdown class="country_style">
          <el-button>
            {{simulationDropDownItem}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="overviewpageDropdownStyle" :appendToBody="false">
            <el-dropdown-item @click.native="handleSimulationData('全部')">全部</el-dropdown-item>
            <el-dropdown-item @click.native="handleSimulationData('本周')">本周</el-dropdown-item>
            <el-dropdown-item @click.native="handleSimulationData('本月')">本月</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="emulationData_main">
        <!-- 左侧卡片 -->
        <div class="emulationData_left">
          <el-card class="left_card1">
            <img src="../../../../assets/images/emulation-icon1.svg" class="emulation-icon1">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">测试任务数</span>
            </div>
            <div class="number">{{numFormat(simulationCardData.test_tasks)}}</div>
            <div class="bottom">
              <span class="bottom_info">待测试任务：</span>
              <span class="bottom_num">{{simulationCardData.pending_tasks}}</span>
            </div>
          </el-card>
          <el-card class="left_card2">
            <img src="../../../../assets/images/emulation-icon2.svg" class="emulation-icon2">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">任务成功率</span>
            </div>
            <div class="number">{{simulationCardData.success_rate + '%'}}</div>
            <div class="bottom">
              <span class="bottom_info">本周提升：</span>
              <span class="bottom_num">{{simulationCardData.success_rate_upscale + '%'}}</span>
              <span class="up_arrow" v-if="simulationCardData.success_rate_upscale">
                <span class="arrow"></span>
              </span>
              <span class="down_arrow" v-else>
                <span class="arrow"></span>
              </span>
            </div>
          </el-card>
          <el-card class="left_card3">
            <img src="../../../../assets/images/emulation-icon3.svg" class="emulation-icon3">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">本周测试里程</span>
            </div>
            <div class="number">
              <span>{{simulationCardData.week_test_mileage }}</span>
              <span style="font-size: 14px; margin-left: 5px;">KM</span>
            </div>
          </el-card>
          <el-card class="left_card4">
            <img src="../../../../assets/images/emulation-icon4.svg" class="emulation-icon4">
            <div class="mask"></div>
            <div slot="header" class="clearfix">
              <span class="header_info">全部测试里程</span>
            </div>
            <div class="number">
              <span>{{simulationCardData.all_test_mileage }}</span>
              <span style="font-size: 14px; margin-left: 5px;">KM</span>
            </div>
          </el-card>
        </div>
        <!-- 右侧图表 -->
        <div class="emulationData_right">
          <simulationDataChat ref="simulationChartComponent"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import durationChat from './dataAccess/anonymizationDataChat/durationChat.vue'
import labelDataChat from './dataAccess/labelDataChat.vue'
import scenarioDataPie from './dataAccess/sceneDatachat/sceneDataPie.vue'
import scenarioDataBar from './dataAccess/sceneDatachat/sceneDataBar.vue'
import simulationDataChat from './dataAccess/simulationDataChat.vue'
import feelChatPage from './dataAccess/trainData/feelChatPage.vue'
import alarmIcon from '../../../../components/alarmIconComponent/alarmIconComponent.vue'
import { importTrainData } from './dataAccess/api/echartsChatApi';
import { importAnonymizeData, importAnonymizeGraphData } from './dataAccess/api/echartsChatApi'
export default {
  components: {
    durationChat,
    labelDataChat,
    scenarioDataPie,
    scenarioDataBar,
    simulationDataChat,
    feelChatPage,
    alarmIcon,
  },
  data() {
    return {
      cardData: {},
      trainCardData: {},
      labelCardData: {},
      simulationCardData: {},
      trainDataName: [],
      trainData: [],
      trainDataColor:['rgba(66,120,252,1)','rgba(63,188,141,1)','rgba(161,161,161,1)'],
      anonymizeAreaData: [],
      anonymizeData: {
        size:[],
        duration:[],
        mileage:[]
      },
      anonymizeDataColor: ['#4278FC','#3FBC8D','#FAA819'],
      anonymizeDataSwitch: '城市',
      isAdminPermissions: false, // 是否有admin权限
      carouseId: 0,
      dataVolumeTotal: 0,
      anonymizeDropDownItem: '城市',
      annotateDropDownItem: '全部',
      sceneDropDownItem: '全部',
      simulationDropDownItem: '全部'
    }
  },
  created() {
    this.getAdminPermissions();
    this.getCardData();
    this.getAnonymizeData();
    this.getTrainCardData();
    this.getTrainEchartsData();
    this.getLabelCardData();
    this.getSimulationCardData();
  },
  methods: {
    // 退出登录
    handleUserSetting(command) {
      if (command === 'loginout') {
        this.$url.post('logout')
          .then(res => {
            if (res.status === 200) {
              this.$message.success('退出成功')
              this.$router.push({ path:'/Login'})
              this.$stor.del('X-CSRFToken')
            }
          })
          .catch(err => {
          })
      }
    },
    // 获取admin权限
    getAdminPermissions() {
      this.$url.get('monitor/check')
        .then(res => {
          if (res.status === 200) {
            this.isAdminPermissions = true;
          } else if (res.status === 403) {
            this.isAdminPermissions = false;
          }
        })
        .catch(err=>{

        })
    },
    // 获取卡片数据
    getCardData() {
      this.$url.get('monitor/summarize')
        .then(res => {
          if (res.status === 200) {
            this.cardData = res.data.data;
          }
        })
        .catch(err=>{

        })
    },
    // 获取脱敏后数据
    async getAnonymizeData() {
      const res = await importAnonymizeData()
      let anonymizeDetailData = res.data.data;
      this.updateAnonymizeData(anonymizeDetailData);
    },
    // 点击待脱敏数据下拉菜单全国中的城市
    handleAnonymizeData(command) {
      this.anonymizeDataSwitch = command;
      this.anonymizeDropDownItem = command;
      this.anonymizeDataChange();
    },
    // 待脱敏数据城市改变 城市变化
    async anonymizeDataChange() {
      if (this.anonymizeDataSwitch === '城市') {
        this.getAnonymizeData()
      } else if (this.anonymizeDataSwitch === '图商') {
        const res = await importAnonymizeGraphData()
        let anonymizeDetailData = res.data.data;
        this.updateAnonymizeData(anonymizeDetailData);
      }
    },
    // 更新待脱敏数据
    updateAnonymizeData(data) {
      this.dataVolumeTotal = 0;
      this.anonymizeAreaData.length = 0;
      this.anonymizeData.size.length = 0;
      this.anonymizeData.duration.length = 0;
      this.anonymizeData.mileage.length = 0;
      data.forEach(item=>{
        this.dataVolumeTotal += item.size;
        if(this.anonymizeDataSwitch === '城市'){
          this.anonymizeAreaData.push(item.area);
        }else {
          this.anonymizeAreaData.push(item.graph_business);
        }
        this.anonymizeData.size.push(item.size);
        this.anonymizeData.duration.push(item.duration);
        this.anonymizeData.mileage.push(item.mileage);
      })
    }, 
    // 获取标注卡片数据
    getLabelCardData() {
      this.$url.get('monitor/annotate')
        .then(res => {
          if (res.status === 200) {
            this.labelCardData = res.data.data;
          }
        })
        .catch(err=>{

        })
    },
    // 点击标注数据下拉菜单中的时间
    handleAnnotationData(command) {
      this.annotateDropDownItem = command
      this.$refs.annotationChartComponent.chartRender(command)
    },
    // 点击场景数据下拉菜单中的时间
    handleSceneData(command) {
      this.sceneDropDownItem = command
      this.$refs.sceneBarChartComponent.chartRender(command)
    },
    // 获取训练卡片数据
    getTrainCardData() {
      this.$url.get('monitor/train')
        .then(res => {
          if (res.status === 200) {
            this.trainCardData = res.data.data;
          }
        })
        .catch(err=>{

        })
    },
    // 获取仿真卡片数据
    getSimulationCardData() {
      this.$url.get('monitor/emulation')
        .then(res => {
          if (res.status === 200) {
            this.simulationCardData = res.data.data;
          }
        })
        .catch(err=>{

        })
    },
    // 点击仿真数据下拉菜单全国中的城市
    handleSimulationData(command) {
      this.simulationDropDownItem = command
      this.$refs.simulationChartComponent.chartRender(command)
    },
    // 获取训练echarts信息
    async getTrainEchartsData() {
      const res = await importTrainData();        
      this.trainDataName.length = 0;
      this.trainData.length = 0;
      res.data.data.forEach(item=>{
        if(this.trainDataName.indexOf(item.name) == -1) {
          this.trainDataName.push(item.name);
          this.trainData.push({
            name: item.name,
            trainType: item.train_type,
            trainVersion: item.train_version,
            trainTimes: [item.train_times],
            trainPrecision: [item.train_precision],
            trainProgress: [item.train_progress],
          });
        }else {
          let index = this.trainDataName.indexOf(item.name);
          this.trainData[index].trainTimes.push(item.train_times);
          this.trainData[index].trainPrecision.push(item.train_precision);
          this.trainData[index].trainProgress.push(item.train_progress);
        }
      })
      this.trainData.forEach(item=>{
        item.trainTimes.reverse();
        item.trainPrecision.reverse();
        item.trainProgress.reverse();
        item.dataLength = item.trainTimes.length;
      })
    },
    // 跳转到数据大屏
    showDataScreen() {
      this.$router.push({path:'/DataScreen'})
    }
  }
}
</script>

<style lang="less">
#overview_container {
  // height: 100%;
  box-sizing: border-box;
  padding-bottom: 110px;
  // 总览页面头部样式
  .overview_header {
    font-size: 20px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: Bold;
    color: #131416;
    .header_left {
      display: inline-block;
      margin-right: 1090px;
    }
    .header_right {
      display: inline-block;
      .user_icon {
        display: inline-block;
        height: 40px;
        width: 40px;
        border: 1px solid #e6e6e6;
        text-align: center;
        box-sizing: border-box;
        margin-right: 20px;
        img {
          width: 18px;
          height: 18px;
          padding-top: 10px;
        }
      }
      .data_screen {
        position: relative;
        display: inline-block;
        height: 40px;
        width: 160px;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        background: #da0000;
        border: 1px solid #c90000;
        margin-top: -8px;
        margin-left: 20px;
        text-align: center;
        vertical-align: middle;
        text-shadow: 0px 5px 5px 0px rgba(201, 0, 0, 0.2);
        box-sizing: border-box;
        .screen_icon {
          position: absolute;
          top: 2px;
          left: 35px;
          img {
            width: 16px;
            height: 16px;
          }
        }
        .screen_content {
          margin-left: 20px;
        }
      }
    }
  }
  // 卡片区域样式
  .card_show {
    margin-top: 30px;
    .card_box {
      width: 288px;
      height: 100px;
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      color: #131416;
      display: inline-block;
      margin-right: 20px;
      position: relative;
      border: 1px solid #e6e6e6;
      border-radius: 2px;
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: '';
      }
      .clearfix:after {
        clear: both;
      }
      .number {
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        text-align: start;
        font-size: 24px;
        color: #1d1d1f;
      }
    }
    .card_box:hover {
      border: 1px solid rgba(10, 76, 238, 0.4);
      background: linear-gradient(to right,#ffff, rgba(255, 255, 255, 1) 80%,#d0dcfc);
    }
    .el-card__header {
      border-bottom: none;
      text-align: start;
      padding: 18px 0 10px 20px;
    }
    .el-card__body {
      padding: 0 20px;
    }
  }
  // 脱敏后数据及标注数据样式
  .echarts_area {
    width: 100%;
    margin-top: 20px;
    .echarts_header {
      .anonymize_content {
        display: inline-block;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        color: #131416;
        margin-right: 7px;
      }
      .anonymize_total {
        width: 45px;
        display: inline-block;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        color: #131416;
      }
      .total_unit {
        display: inline-block;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        font-size: 12px;
        color: #131416;
        margin: 0 513px 0 3px;
      }
      .el-dropdown {
        margin-right: 10px;
      }
      .el-button {
        padding: 8px 15px;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        color: #131416;
      }
      .annotate_content {
        display: inline-block;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        color: #131416;
        margin-left: 30px;
        margin-right: 600px;
      }
    }

    .echarts_main {
      display: flex;
      .anonymize_echarts {
        width: 740px;
        height: 340px;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        margin-right: 40px;
        .anonymize_header {
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: Bold;
          font-size: 12px;
          color: #a1a1a1;
          margin-top: 24px;
          .city {
            margin-left: 34px;
            margin-right: 84px;
          }
          .duration {
            margin: 0 142px 0 127px;
          }
        }
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .is-horizontal {
          display: none;
        }
        .anonymize_right {
          display: flex;
          .city_info {
            width: 35px;
            list-style: none;
            padding: 0;
            margin: 0;
            // margin: 65px 24px 0 29px;
            margin: 20px 56px 0 34px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            li {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
              //   margin-bottom: 21px;
            }
            li:last-child {
              margin-bottom: 0;
            }
          }
          .anonymizeGraph {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            margin-right: 20px;
          }
          .signalDataStyle {
            justify-content: start;
            margin-top: 36px;
          }
        }
      }
      .annotate_left {
        margin-right: 20px;
        .card_up {
          width: 300px;
          height: 160px;
          background: #ffffff;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          margin-bottom: 20px;
          position: relative;
          .label_icon1 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
          }
        }
        .card_up:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .card_down {
          width: 300px;
          height: 160px;
          background: #ffffff;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          position: relative;
          .label_icon2 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
          }
        }
        .card_down:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .el-card__header {
          border-bottom: none;
          text-align: start;
          padding: 18px 0 10px 20px;
        }
        .el-card__body {
          padding: 0 20px;
        }
      }
      .annotate_right {
        width: 420px;
        height: 340px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        .labelData_header {
          margin-top: 30px;
          margin-left: 80px;
          .labelData_picture {
            display: inline-block;
            .picture_point {
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #4278fc;
              border-radius: 50%;
              margin-right: 10px;
              margin-top: 2px;
            }
            .picture_text {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #a1a1a1;
            }
          }
          .labelData_cloud {
            margin-left: 78px;
            display: inline-block;
            .cloud_point {
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #3fbc8d;
              border-radius: 50%;
              margin-right: 10px;
            }
            .cloud_text {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #a1a1a1;
            }
          }
        }
      }
    }
  }
  // 场景数据样式
  .sceneData_echarts {
    margin-top: 20px;
    .sceneData_header {
      margin-bottom: 10px;
      .sceneData_content {
        display: inline-block;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        font-size: 16px;
        color: #131416;
        margin-right: 1380px;
      }
      .country_style {
        margin-right: 10px;
      }
      .el-button {
        padding: 8px 15px;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        color: #131416;
      }
    }
    .sceneData_main {
      display: flex;
      .pie_chart {
        width: 300px;
        height: 340px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        margin-right: 20px;
        .pie_bottom {
          margin-bottom: 10px;
          margin-left: 55px;
          .pie_city {
            display: inline-block;
            .city_point {
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #4278fc;
              border-radius: 50%;
              margin-right: 6px;
            }
            .city_text {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #a1a1a1;
            }
          }
          .pie_highSpeed {
            display: inline-block;
            margin: 0 27px;
            .highSpeed_point {
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #3fbc8d;
              border-radius: 50%;
              margin-right: 6px;
            }
            .highSpeed_text {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #a1a1a1;
            }
          }
          .pie_park {
            display: inline-block;
            .park_point {
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #faa819;
              border-radius: 50%;
              margin-right: 6px;
            }
            .park_text {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #a1a1a1;
            }
          }
        }
      }
      .bar_chart {
        width: 1200px;
        height: 340px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
      }
    }
  }
  // 训练数据样式
  .trainingData_echarts {
    margin-top: 40px;
    .trainingData_header {
      margin-bottom: 27px;
      .trainingData_content {
        width: 64px;
        height: 16px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        color: #131416;
      }
    }
    .trainingData_main {
      display: flex;
      .trainingData_left {
        .card_up {
          width: 300px;
          height: 160px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          margin-bottom: 20px;
          position: relative;
          .train-icon1 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
          }
        }
        .card_up:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .card_down {
          width: 300px;
          height: 160px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          position: relative;
          .train-icon2 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
          }
        }
        .card_down:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .el-card__header {
          border-bottom: none;
          text-align: start;
          padding: 18px 0 10px 20px;
        }
        .el-card__body {
          padding: 0 20px;
        }
      }
      .trainingData_right {
        width: 1200px;
        height: 340px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        font-size: 14px;
        color: #0070ff;
        margin-left: 20px;
        overflow: hidden;

        .el-scrollbar__wrap {
          overflow-x: auto;
          height: calc(100% + 20px); 
        }
        .el-scrollbar__bar{
          left: 0 !important;
          right: 0 !important;  
          .el-scrollbar__thumb{
            border-radius: 2px !important;
          }
        }
        .trainCharts {
          display: flex;
          justify-content: space-around;
          padding-right: 20px;
        }
        .feel {
          width: 440px;
          box-sizing: border-box;
          .feel_header {
            display: flex;
            margin: 30px 15px 15px 40px;
            .feel_icon {
              width: 40px;
              height: 40px;
              font-size: 12px;
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              text-align: CENTER;
              color: #ffffff;
              border-radius: 3px;
              line-height: 40px;
              margin-right: 20px;
            }
            .feel_detail {
              .feel_content {
                display: block;
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: Normal;
                font-size: 14px;
                color: #131416;
              }
              .feel_version {
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: Normal;
                font-size: 12px;
                color: #a1a1a1;
              }
            }

            .feel_progress {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              .progress_times {
                display: inline-block;
                margin-right: 68px;
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: Normal;
                font-size: 14px;
                color: #131416;
              }
              .el-progress-bar {
                padding-right: 0;
              }
              .el-progress-bar__outer {
                height: 8px !important;
                border-radius: 3px;
              }
              .el-progress-bar__inner {
                border-radius: 1px;
              }
              .el-progress__text {// 进度条百分比数值
                margin-top: -35px;
                margin-left: 25px;
              }
            }
          }
        }
      }
    }
  }

  // 仿真数据样式
  .emulationData_echarts {
    margin-top: 20px;
    .emulationData_header {
      margin-bottom: 10px;
      .emulationData_content {
        display: inline-block;
        width: 64px;
        height: 16px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        color: #131416;
        margin-right: 1376px;
      }
      .country_style {
        margin-right: 10px;
      }
      .el-button {
        padding: 8px 15px;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        color: #131416;
      }
    }
    .emulationData_main {
      display: flex;
      .emulationData_left {
        width: 640px;
        display: flex;
        flex-wrap: wrap;
        .left_card1 {
          width: 300px;
          height: 160px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          margin-right: 20px;
          margin-bottom: 20px;
          box-sizing: border-box;
          position: relative;
          .emulation-icon1 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
            .up_arrow {
              position: relative;
              top: 2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: linear-gradient(180deg, #4278fc, #4278fc 54%, rgba(66, 120, 252, 0));
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: -10px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-bottom: 5px solid #4278fc;
              }
            }
            .down_arrow {
              position: relative;
              top: -2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: #ac4805;
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: 7px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top: 5px solid #ac4805;
              }
            }
          }
        }
        .left_card1:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .left_card2 {
          width: 300px;
          height: 160px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          margin-right: 20px;
          margin-bottom: 20px;
          box-sizing: border-box;
          position: relative;
          .emulation-icon2 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
            .up_arrow {
              position: relative;
              top: 2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: linear-gradient(180deg,#4278fc, #4278fc 54%, rgba(66, 120, 252, 0));
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: -10px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-bottom: 5px solid #4278fc;
              }
            }
            .down_arrow {
              position: relative;
              top: -2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: #ac4805;
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: 7px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top: 5px solid #ac4805;
              }
            }
          }
        }
        .left_card2:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .left_card3 {
          width: 300px;
          height: 160px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          margin-right: 20px;
          box-sizing: border-box;
          position: relative;
          .emulation-icon3 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
            .up_arrow {
              position: relative;
              top: 2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: linear-gradient(180deg,#4278fc, #4278fc 54%, rgba(66, 120, 252, 0));
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: -10px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-bottom: 5px solid #4278fc;
              }
            }
            .down_arrow {
              position: relative;
              top: -2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: #ac4805;
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: 7px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top: 5px solid #ac4805;
              }
            }
          }
        }
        .left_card3:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .left_card4 {
          width: 300px;
          height: 160px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          margin-right: 20px;
          box-sizing: border-box;
          position: relative;
          .emulation-icon4 {
            width: 140px;
            position: absolute;
            right: -45px;
            bottom: -20px;
          }
          .mask {
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
          .header_info {
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: Normal;
            font-size: 12px;
            color: #131416;
          }
          .number {
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: Bold;
            font-size: 24px;
            color: #131416;
          }
          .bottom {
            margin-top: 50px;
            .bottom_info {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #949494;
            }
            .bottom_num {
              font-family: Microsoft YaHei, Microsoft YaHei-Normal;
              font-weight: Normal;
              font-size: 12px;
              color: #131416;
            }
            .up_arrow {
              position: relative;
              top: 2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: linear-gradient(180deg,#4278fc, #4278fc 54%, rgba(66, 120, 252, 0));
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: -10px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-bottom: 5px solid #4278fc;
              }
            }
            .down_arrow {
              position: relative;
              top: -2px;
              display: inline-block;
              width: 4px;
              height: 8px;
              background: #ac4805;
              margin-left: 5px;
              .arrow {
                position: absolute;
                top: 7px;
                left: -3px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top: 5px solid #ac4805;
              }
            }
          }
        }
        .left_card4:hover {
          border: 1px solid rgba(10, 76, 238, 0.4);
          .mask {
            display: none;
            width: 140px;
            height: 160px;
            position: absolute;
            right: 0;
            bottom: -20px;
            background: rgba(255, 255, 255, 0.8);
          }
        }
        .el-card__header {
          border-bottom: none;
          text-align: start;
          padding: 18px 0 10px 20px;
        }
        .el-card__body {
          padding: 0 20px;
        }
      }
      .emulationData_right {
        width: 880px;
        height: 340px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        box-sizing: border-box;
      }
    }
  }

  //修改下拉列表el-dropdown样式
  .el-dropdown .el-button {
    width: 80px;
    border-radius: 2px;
    text-align: left;
    padding: 8px 10px !important;
    span i {
      margin-left: 22px;
    }
  }
}
//修改下拉列表选项el-dropdown-menu样式
.overviewpageDropdownStyle {
  padding: 5px 0;
  margin: 5px 0 !important;
  width: 78px;
  border-color: #e6e6e6;
  border-radius: 2px;
  top: 30px !important;
  left: 0 !important;
  transform-origin: center top !important;
  .el-dropdown-menu__item {
    line-height: 20px;
    font-size: 12px;
    padding-left: 10px;
    color: #131416;
  }
  .popper__arrow {
    display: none !important;
  }
}
</style>
